<template>
  <div class="findRouteBox">
    <div class="detailWrapBoxCe">
      <div
        style="
          border-radius: 12px;
          height: 100%;
          border: 2px solid #003b7a;
          min-height: 540px;
        "
      >
        <div class="detailBody">
          <div class="form-group">
            <h3>
              <i></i>个人信息<el-button
                class="absBtn"
                type="primary"
                @click="handlePersonalInfoBtnClick"
              >
                {{ personalInfoBtnText }}
              </el-button>
            </h3>
            <el-form
              style="margin-left: 50px"
              :model="personalInfo"
              label-width="100px"
            >
              <el-form-item label="用户名:">
                <el-input
                  v-model="personalInfo.userName"
                  :disabled="!isPersonalInfoEditable"
                />
              </el-form-item>
              <el-form-item label="真实姓名:">
                <el-input
                  v-model="personalInfo.nickName"
                  :disabled="!isPersonalInfoEditable"
                />
              </el-form-item>
              <el-form-item label="工作单位:">
                <el-input
                  v-model="personalInfo.company"
                  :disabled="!isPersonalInfoEditable"
                />
              </el-form-item>
              <el-form-item label="工作职务:">
                <el-input
                  v-model="personalInfo.duty"
                  :disabled="!isPersonalInfoEditable"
                />
              </el-form-item>
              <el-form-item label="电话号码:">
                <el-input
                  v-model="personalInfo.phoneNumber"
                  :disabled="!isPersonalInfoEditable"
                />
              </el-form-item>
              <el-form-item label="手机号码:">
                <el-input
                  v-model="personalInfo.mobile"
                  :disabled="!isPersonalInfoEditable"
                />
              </el-form-item>
              <el-form-item label="邮编:">
                <el-input
                  v-model="personalInfo.postCode"
                  :disabled="!isPersonalInfoEditable"
                />
              </el-form-item>
              <el-form-item label="电子邮箱:">
                <el-input
                  v-model="personalInfo.email"
                  :disabled="!isPersonalInfoEditable"
                />
              </el-form-item>
              <el-form-item label="地址:">
                <el-input
                  v-model="personalInfo.address"
                  :disabled="!isPersonalInfoEditable"
                />
              </el-form-item>
            </el-form>
          </div>

          <div class="form-group" style="width: 100%">
            <h3>
              <i></i>密码设置<el-button
                class="absBtn"
                type="primary"
                @click="handlePasswordBtnClick"
                style="margin-left: 100px"
              >
                {{ passwordBtnText }}
              </el-button>
            </h3>

            <el-form
              style="margin-left: 50px; clear: both"
              :model="passwordInfo"
              label-width="100px"
            >
              <el-form-item label="旧密码:">
                <el-input
                  v-model="passwordInfo.oldPassword"
                  type="password"
                  :disabled="!isPasswordEditable"
                />
              </el-form-item>
              <el-form-item style="clear: both" label="新密码:">
                <el-input
                  v-model="passwordInfo.newPassword"
                  type="password"
                  :disabled="!isPasswordEditable"
                />
              </el-form-item>
              <el-form-item style="clear: both" label="确认密码:">
                <el-input
                  v-model="passwordInfo.confirmPassword"
                  type="password"
                  :disabled="!isPasswordEditable"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="footerTime">
        <p>当前时间(UTC)：{{ utcTime }}</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { systemUsersMeApi, systemUserIdApi, userPassWordApi } from "@/api/user";
import { ElMessage, ElMessageBox } from "element-plus";
import { useTime } from "@/utils/tools/useTime";

const { utcTime } = useTime();
// 个人信息相关响应式数据
const personalInfo = ref({
  userName: "",
  nickName: "",
  company: "",
  duty: "",
  phoneNumber: "",
  mobile: "",
  postCode: "",
  email: "",
  address: "",
});
const isPersonalInfoEditable = ref(false);
const personalInfoBtnText = ref("修改个人信息");

// 密码相关响应式数据
const passwordInfo = ref({
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
});
const isPasswordEditable = ref(false);
const passwordBtnText = ref("修改密码");

const getUserPassWord = async () => {
  const passData = {};
  passData.oldPassword = passwordInfo.value.oldPassword;
  passData.newPassword = passwordInfo.value.newPassword;
  const { code, data } = await userPassWordApi(passData);
  if (code === 200) {
    ElMessage.success(data);
  }
};

const getSystemUserId = async () => {
  const { code, data } = await systemUserIdApi(personalInfo.value);
  if (code === 200) {
    ElMessage.success(data);
  }
};

const getSystemUsersMe = async () => {
  const { code, data } = await systemUsersMeApi();
  if (code === 200) {
    personalInfo.value.userName = data.userName;
    personalInfo.value.nickName = data.nickName;
    personalInfo.value.company = data.company;
    personalInfo.value.duty = data.duty;
    personalInfo.value.phoneNumber = data.phoneNumber;
    personalInfo.value.mobile = data.mobile;
    personalInfo.value.postCode = data.postCode;
    personalInfo.value.email = data.email;
    personalInfo.value.address = data.address;
  }
};
// 模拟从接口获取数据（实际开发中替换为真实接口请求）
onMounted(() => {
  getSystemUsersMe();
});

// 处理个人信息按钮点击事件
const handlePersonalInfoBtnClick = () => {
  if (!isPersonalInfoEditable.value) {
    isPersonalInfoEditable.value = true;
    personalInfoBtnText.value = "保存个人信息";
  } else {
    ElMessageBox.confirm("是否确认修改个人信息？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      customClass: "custom-message-box",
    })
      .then(() => {
        getSystemUserId();
        isPersonalInfoEditable.value = false;
        personalInfoBtnText.value = "修改个人信息";
      })
      .catch(() => {
        // 点击“取消”按钮或关闭弹框后的回调
        console.log("用户取消了修改个人信息操作");
      });
  }
};

// 处理密码按钮点击事件
const handlePasswordBtnClick = () => {
  if (!isPasswordEditable.value) {
    isPasswordEditable.value = true;
    passwordBtnText.value = "保存密码";
  } else {
    ElMessageBox.confirm("是否确认修改密码？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
      customClass: "custom-message-box",
    })
      .then(() => {
        if (
          passwordInfo.value.newPassword !== passwordInfo.value.confirmPassword
        ) {
          ElMessage.error("新密码和确认密码不一致");
          return;
        }
        getUserPassWord();
        // ElMessage.success("密码修改成功");
        isPasswordEditable.value = false;
        passwordBtnText.value = "修改密码";
        passwordInfo.value.newPassword = "";
        passwordInfo.value.confirmPassword = "";
      })
      .catch(() => {
        console.log("用户取消了修改密码操作");
      });
  }
};
</script>
<style scoped lang="scss">
.form-group {
  position: relative;
  // width: 1010px;
  width: 100%;
  margin-bottom: 20px;
  height: 300px;
}

.absBtn {
  position: absolute;
  top: 0px;
  right: 0px;
}
h3 {
  position: relative;
  margin-bottom: 24px;
  color: #fff;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  line-height: 24px; /* 修正笔误：list-style 改为 line-height，确保文本垂直对齐 */

  i {
    margin-right: 6px;
    width: 24px;
    height: 24px;
    background-image: url("../../assets/images/user/dingwei.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    vertical-align: middle;
    display: inline-block;
  }
}
.findRouteBox {
  height: calc(100vh - 66px);
  // height: 100%;
  position: relative;
  background-color: #06112a;
  width: 100%;
  min-width: 1280px;
  z-index: 1;
}
.detailWrapBoxCe {
  padding: 18px 24px 16px 24px;
  width: 100%;
  height: 100%;
  height: calc(100% - 28px);
  z-index: 1;
  .detailBody {
    width: 100%;
    padding: 0 30px;
    padding-top: 15px;
    // height: calc(100vh - 94px);
  }
}

// 新增：.detailWrapBoxCe 下 input 专属样式
:deep(.detailWrapBoxCe) {
  .el-input__wrapper {
    height: 28px !important;
    border: 1px solid #003b7a !important;
    font-size: 12px !important;
  }
  .el-input__inner {
    font-size: 12px !important;
  }
  .el-input--password .el-input__wrapper {
    height: 28px !important;
    font-size: 12px !important;
  }
}

:deep(.el-input__inner) {
  color: #fff;
  font-size: 14px;
}
:deep(.el-select__wrapper),
:deep(.el-input__wrapper) {
  box-shadow: none;
  background-color: transparent !important;
  color: #fff !important;
  box-shadow: none;
  height: 32px;
  line-height: 32px;
  min-height: 32px;
  border: 1px solid #003b7a;
}
:deep(.el-select__placeholder) {
  color: #fff;
}
:deep(.el-form-item) {
  float: left;
  width: 470px;
}
:deep(.el-form-item__label) {
  color: #fff;
}
:deep(.el-input.is-disabled .el-input__wrapper) {
  box-shadow: none;
}

.footerTime {
  // position: fixed;
  // left: 0;
  // bottom: 0;
  width: 100%;
  height: 28px;
  min-width: 1280px;
  background-color: #050d24;
  p {
    color: #fff;
    text-align: right;
    font-size: 12px;
    line-height: 28px;
    padding-right: 16px;
  }
}
</style>
